<!DOCTYPE html>
<html>
<head>
		<meta charset="UTF-8">
		<title>个人资料</title>
	    <meta http-equiv="Window-target" content="_top">
		<meta http-equiv="X-UA-Compatible"content="IE=edge,chrome=1"/>
		<meta name="apple-mobile-web-app-status-bar-style" content="black" /> 
		<meta name="apple-mobile-web-app-capable" content="yes"/>
		<meta name="apple-mobile-web-app-title" content="标题"/>
		<link rel="apple-touch-icon-precomposed" href="png"/>
		<link rel="apple-touch-icon-precomposed" sizes="114x114" href="png"/>	
		<script src="../../js/flexible.debug.js"></script>
		<script src="../../js/flexible_css.debug.js"></script>
		<link rel="stylesheet" type="text/css" href="../../css/Lo_presonal.css"/>
	</head>
<body>
	<header class="Lo_presonal">
	<!-- 返回首页 -->
		<p class="Login_to_index"><img src="../../imgs/return.png"></p>
		<p class="flex2">个人资料</p>
		<p class="flex3">保存</p>
	</header>
	<main>
		<section class="center">
			<article class="tou prer">
				<p>头像</p>
				<div>
					<img class="tt" src="../../imgs/dd_log.png" alt="">
					<img class="back" src="../../imgs/dd_infos7.png" alt="">
				</div>
			</article>

			<article class="nict">
				<p>昵称</p>
				<input type="text" placeholder="未填写">
			</article>

			<article class="nict">
				<p>手机号</p>
				<input type="text" placeholder="未填写">
			</article>

			<article class="nict">
				<p>性别</p>
				<input type="text" value="男" placeholder="">
			</article>

			<article id="pess" class="tou">
				<p>证件地区</p>
				<div>
					<p><img class="tc" src="../../imgs/guoqi_03.png" alt=""></p>
					<img class="back" src="../../imgs/dd_infos7.png" alt="">
				</div>
			</article>

			<article class="nict">
				<p>真实姓名</p>
				<input type="text" placeholder="未填写">
			</article>

			<article class="nict">
				<p>身份证号</p>
				<input type="text" placeholder="未填写">
			</article>

		</section>

	</main>
	<footer>
		<section class="center c2">
			<article class="nict">
				<p>身高(cm)</p>
				<input type="text" placeholder="未填写">
			</article>

			<article class="nict">
				<p>体重(kg)</p>
				<input type="text" placeholder="未填写">
			</article>
		 </section>
		 
	</footer>


	<!-- 头像选择 -->
	<div class="moT" style="display:none;">
		<div class="cctv">
			<div class="tiao">
			    <p>拍照</p>
				<a href="#" class="file">从相册中选择
				   <input type="file" name="" id="">
				</a>
			</div>
			<div class="cancle">取消</div>
		</div>
	</div>



	<!-- 隐藏盒子 -->
		<div class="model">
			<div class="cont">
				<article class="tet">
					<p><img src="../../imgs/guoqi_03.png"></p>
					<p class="text">内地</p>
				</article>
				<article class="tet">
					<p><img src="../../imgs/guoqi_06.png"></p>
					<p class="text">香港</p>
				</article>
				<article class="tet">
					<p><img src="../../imgs/guoqi_08.png"></p>
					<p class="text">澳门</p>
				</article>

				<article class="tet">
					<p><img src="../../imgs/guoqi_10.png"></p>
					<p class="text">台湾</p>
				</article>

			</div>
		</div>

<script type="text/javascript" src='../../js/jquery.js'></script>
	<script type="text/javascript">

		//跳转返回
		$('.Login_to_index').click(function(){
			 history.back();
		});

		//保存
		$('.flex3').click(function(){
			//console.log($('.nict').find('input').val())
			 history.back();
		});

		//点击显示
		$('#pess').click(function(){
			$('.model').show();
			$('.cont').animate({bottom:0},500);

		});

		//点击对应的国旗显示
		$('.tet').click(function(){
			$('.model').hide();
			$('.cont').animate({bottom:'-400px'},500);
		 var index = $(this).index();
			$('.tc').attr('src',$('.tet p img').eq(index).attr('src') );
		})
		
		//头像显示
		$('.prer').click(function(){
			$('.moT').show();
		})

		//点击取消
		$('.cancle').click(function(){
			$('.moT').slideUp('hide');
		})

        //点击任意地方消失
		$('.moT').click(function(event){
			if(event.target.className == "moT"){
                $(this).slideUp();
            }
		})
        $('.model').click(function(event){
            if(event.target.className == "model"){
                $(this).slideUp();
            }
        })
	</script>
</body>
</html>